<template>
	<view class="content">
		<view class="header">
			<!-- <view class="header-left">
				<image src="/static/close.png" mode="" @tap="close"></image>
				<span>隐患跟踪</span>
			</view> -->
			<!-- <view class="header-right">
				<image src="../../../static/dian.png" mode=""></image>
			</view> -->
		</view>
		<view class="ipts">
			<view class="info-item">
				<view class="dot"></view>
				<span>隐患编号</span>
				<input v-model="userinfo.no" type="text" disabled placeholder-class="place-class">
			</view>
			<view class="hengxian"></view>
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<span>上传日期</span>
				</view>
				<text style="color: #999999;font-size: 28rpx;">{{userinfo.create_time}}</text>
				<!-- <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="uni-input">{{date}}</view>
				</picker> -->
				<!-- <input type="text" placeholder="07.24-07.30" placeholder-class="place-class"> -->
			</view>
			<view class="hengxian"></view>
			<view class="info-item">
				<view class="dot"></view>
				<span>隐患地址</span>
				<input disabled v-model="userinfo.address" type="text" placeholder-class="place-class">
				<image src="/static/qxsb.png" mode="" style="width: 40rpx; height: 40rpx;" @tap="tapMap(userinfo)">
				</image>
			</view>
			<view class="hengxian"></view>
		</view>
		<view class="ipts">
			<view class="info-item">
				<view class="dot"></view>
				<span>隐患来源</span>
				<input disabled v-model="userinfo.source" type="text" placeholder-class="place-class">
			</view>
			<view class="hengxian"></view>
			<view class="info-item">
				<view class="dot"></view>
				<span>隐患类别</span>
				<input disabled v-model="userinfo.classify" type="text" placeholder-class="place-class">
			</view>
			<view class="hengxian"></view>
			<view class="info-item">
				<view class="dot"></view>
				<span>隐患类型</span>
				<input disabled v-model="userinfo.type_text" type="text" placeholder-class="place-class">
			</view>
			<view class="hengxian"></view>
			<view class="info-item">
				<view class="dot"></view>
				<span>隐患描述</span>
				<input disabled v-model="userinfo.description" type="text" placeholder-class="place-class">
			</view>
			<view class="hengxian"></view>
			<view class="info-item" v-if="userinfo.picture_1">
				<view class="info-item-left">
					<view class="dot"></view>
					<span>隐患照片</span>
				</view>
				<view class="contimg">
					<view class="danger-img" v-for="(item,index) in userinfo.picture_1" >
						<image :src="item" mode="" @tap="seeimgs(userinfo.picture_1,index)"></image>
					</view>
				</view>
			</view>
			<view class="hengxian"></view>
		</view>
		<!-- 期限 -->
		<view class="ipts">
			<view class="info-item">
				<view class="dot"></view>
				<span>整改期限</span>
				<input type="text" v-model="userinfo.create_time + '-' + userinfo.deadline_time" disabled
					placeholder-class="place-class">
			</view>
		</view>
		<view class="hengxian"></view>
		<!-- 处理情况 -->

		<view class="ipts" v-if="instalrets">
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<span>处理情况</span>
				</view>
				<view class="danger-img-box">
					{{instalrets.handel_msg}}
				</view>
			</view>
			<view class="hengxian"></view>
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<span>处理照片</span>
				</view>
				<view class="danger-img-box">
					<view class="danger-img" v-for="img,index in instalrets.handel_picture" :key='index'>
						<image class="realImg" :src='img'
							@click="seeimg(img)"></image>  
							
					</view>
				</view>
			</view>
		</view>
		<view class="ipts" v-else>
			<view class="info-item">
				<view class="dot"></view>
				<span>处理情况</span>
				<input v-model="handleText" type="text" placeholder="请输入处理情况" placeholder-class="place-class">
			</view>
			<view class="hengxian"></view>
			<view class="info-item">
				<view class="info-item-left">
					<view class="dot"></view>
					<span>处理照片</span>
				</view>
				<view class="danger-img-box">
					<view class="danger-img" v-for="i,idx in img1">
						<image class="delet" src="/static/delet.png" mode="" @click="deletImg(idx)"></image>
						<image class="realImg" :src='imgs + i' @click="seekimg(idx)"></image>
					</view>
					<view class="danger-img">
						<image class="add" src="/static/jiahao.png" mode="" @click="changeImg"></image>
					</view>
				</view>
			</view>
		</view>

		<!-- 跟踪记录 -->
		<view class="ipts">
			<view class="record" v-if="!installList">
				<image src="/static/jilu.png" mode=""></image>
				<span>跟踪记录</span>
			</view>
			<bloak v-for="(item,index) in installList" :key="index">
				<view class="record-item">
					<view class="record-item-left">
						<span class="shu"></span>
						<span class="title">{{item.staff_info.realname}}</span>
						<span class="time">{{item.addtime}}</span>
					</view>
					<view class="record-item-right">
						<image class="dianhua" src="/static/dianhua.png" mode=""></image>
						<span class="title">{{item.staff_info.mobile}}</span>
						<image class="zhankai" src="/static/zhankai.png" mode="" @click="showRecord"></image>
					</view>
				</view>
				<view v-if="showR">
					<view class="info-item">
						<view class="dot"></view>
						<span>处理情况</span>
						<input disabled v-model="item.content" type="text" placeholder="07.24-07.30"
							placeholder-class="place-class">
					</view>
					<view class="hengxian"></view>
					<view class="info-item">
						<view class="info-item-left">
							<view class="dot"></view>
							<span>处理照片</span>
						</view>
						<view class="danger-img-box">
							<view class="danger-img">
								<image :src="imgs + item.pic" mode="" @click="seeimg(imgs + item.pic)"></image>
							</view>
						</view>
					</view>
				</view>
			</bloak>
		</view>
		<!-- <view class="btn">立即登录</view> -->
		<view class="btns" v-if="userinfo.status != '2'">
			<view class="btn1 consel" @click="handleSubmint1">上传跟踪</view>
			<view class="btn1 save" @click="handleSubmint">跟踪完成</view>
		</view>
		<cpimg ref="cpimg" @result="cpimgOk" @err="cpimgErr" :number="1" :fixOrientation="true" :size="500"
			:maxWidth="800" :ql="0.7" type="url" />
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				img1: [], //处理照片的路径
				date: currentDate,
				showR: true,
				username: '',
				password: '',
				// array: ['安装工','检测工','维修工'],
				index: 0,
				userinfo: {},
				value: '', //搜索关键词
				installList: [], //安装列表
				dosearch: false,
				showAcount: false,
				dangerId: '',
				handleText: '',
				long: '',
				lat: '',
				instalrets: '',
				$api: '',
				imgs: 'https://trq.wqzsgas.com',
			};
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad(option) {
			this.token = uni.getStorageSync('token')
			this.dangerId = option.id
			this.getInstallDetail()
			this.getMap()
			
			wx.enableAlertBeforeUnload({
			    message: "是否返回上一页",
			   });
		},
		onShow() {
			
		},

		methods: {
			seeimgs(imgs,index){
				uni.previewImage({
					urls:imgs,
					current:index
				})
			},
			//图片预览
			seeimg(img, index) {
				uni.previewImage({
					urls: [img],
					longPressActions: {
						itemList: [],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			seekimg(index) {
				let arr = []
				for (let i = 0; i < this.img1.length; i++) {
					arr.push(this.imgs + this.img1[i])
				}
				uni.previewImage({
					urls: arr,
					current: index
				});
			},

			// 选择气表照片

			changeImg() {
				if (this.img1.length < 3) {
					var that = this;
					that.$refs.cpimg._changImg()
				} else {
					this.$showToast('上传图片已达到限制')
				}

			},
			cpimgOk(file) {
				let that = this
				uni.showLoading({
					title: '上传中...'
				})

				// 上传图片
				uni.uploadFile({
					// url:'https://trq.aoaojiao.online/api/common/upload',
					url: that.$fileImg + '/common/upload',
					filePath: file[0],
					name: 'file',
					formData: {
						token: that.token,
						no_water: 1
					},
					success(res1) {
						let dataPath = JSON.parse(res1.data)
						if (dataPath.code == 1) {
							that.img1.push(dataPath.data.url)
						}

						uni.hideLoading()
					},
					fail: () => {
						uni.hideLoading()
						uni.showToast({
							title: '上传失败'
						})
					}
				});

			},
			//获取地理位置
			getMap() {
				let that = this
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						that.long = res.longitude
						that.lat = res.latitude
					}
				});
			},
			tapMap(info) {
				console.log(info,'info');
				console.log(info.lat,'info.lat');
				console.log(info.long,'info.long');
				uni.openLocation({
					latitude:Number(info.lat),
					longitude:Number(info.long),
					name:info.address,
					success: (res) => {
						 console.log(res,'成功');
					},
					fail: (err) => {
						console.log(err,'失败');
					}
				})
			},
			close() {
				uni.navigateTo({
					url: '../index/index'
				})
			},
			// 选择日期
			bindDateChange: function(e) {
				this.date = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			// 获取安装数据
			getInstallDetail() {
				let that = this
				that.$request.request({
					url: '/danger/danger_detail',
					method: 'POST',
					data: {
						token: that.token,
						danger_id: that.dangerId
					}
				}).then(res => {
					if (res.data.code == 1) {
						that.userinfo = res.data.data.info
						that.installList = res.data.data.detail
						that.instalrets = res.data.data.result
						console.log('that.instalrets',that.instalrets);
					}
				})
			},
			// 删除图片
			deletImg(index) {
				this.img1.splice(index, 1)
			},
			handleSubmint1() {
				let that = this
				if (that.handleText == '') {
					uni.showToast({
						title: '请输入处理情况',
						icon: 'none'
					})
					return
				}
				if (that.img1 == null) {
					uni.showToast({
						title: '请上传处理照片',
						icon: 'none'
					})
					return
				}
				that.$request.request({
					url: '/danger/danger_continue',
					method: 'POST',
					data: {
						danger_id: that.dangerId,
						token: that.token,
						picture: that.img1,
						content: that.handleText,
						long: that.long,
						lat: that.lat,
					}
				}).then(res => {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				})
			},
			handleSubmint() {
				let that = this
				if (that.handleText == '') {
					uni.showToast({
						title: '请输入处理情况',
						icon: 'none'
					})
					return
				}
				if (that.img1 == null) {
					uni.showToast({
						title: '请上传处理照片',
						icon: 'none'
					})
					return
				}
				that.$request.request({
					url: '/danger/danger_commit',
					method: 'POST',
					data: {
						danger_id: that.dangerId,
						token: that.token,
						handel_picture: that.img1,
						handel_msg: that.handleText,
						long: that.long,
						lat: that.lat,
					}
				}).then(res => {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
					if (res.data.code == 1) {
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},800)
					}
				})
			}
		},

	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F5F5F5;
		// padding-bottom: 200rpx;
		// margin-bottom: 150rpx;
	}

	.content {
		position: relative;
		padding-bottom: 140rpx;
	}

	.uni-input {
		padding: 0;
	}

	.contimg {
		display: flex;
	}

	// header
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		// padding: 30rpx 30rpx;
		background-color: #fff;

		.header-left {
			display: flex;
			align-items: center;
			font-size: 32rpx;
			font-weight: 500;
			color: #333;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 20rpx;
			}
		}

		.header-right {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #333;

			image {
				width: 52rpx;
				height: 52rpx;
				margin-right: 10rpx;
			}
		}
	}

	.ipts {
		background-color: #fff;
		margin-top: 30rpx;
	}

	.info-item {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// height: 72rpx;
		width: 100%;
		padding: 10rpx 30rpx;
		background-color: #fff;
		font-size: 28rpx;
		color: #333;

		input {
			flex: 1;
			text-align: right;
			color: #999999;
			font-size: 28rpx;
		}

		.dot {
			width: 8rpx;
			height: 8rpx;
			background-color: #003690;
			border-radius: 50%;
			margin-right: 10rpx;
		}

		.danger-img {
			position: relative;
			width: 75rpx;
			height: 75rpx;
			border: 2rpx dashed #eee;
			margin-right: 10rpx;

			image {
				width: 100%;
				height: 100%;
			}

			.delet {
				position: absolute;
				top: -12rpx;
				right: -12rpx;
				width: 28rpx;
				height: 28rpx;
				z-index: 999;
			}
		}

		.danger-img-box {
			display: flex;
		}

		.info-item-left {
			display: flex;
			align-items: center;
			font-size: 32rpx;
		}
	}

	.hengxian {
		width: 700rpx;
		height: 2rpx;
		background-color: #eee;
		margin: 20rpx auto;
	}

	.place-class {
		font-size: 26rpx;
		color: #999;
	}

	.btn {
		width: 646rpx;
		height: 80rpx;
		margin: 74rpx auto;
		text-align: center;
		line-height: 80rpx;
		border-radius: 40rpx;
		background-image: linear-gradient(to bottom, #2366D5, #001B48);
		font-size: 32rpx;
		color: #E5EFFE;
	}

	.btns {
		position: fixed;
		bottom: 0;
		display: flex;
		width: 100%;

		.btn1 {
			width: 50%;
			height: 96rpx;
			line-height: 96rpx;
			text-align: center;
			font-size: 28rpx;
		}

		.consel {
			background-color: #e9e9e9;
			color: #777;
		}

		.save {
			background-color: #003690;
			color: #fff;
		}
	}

	.btn:active {
		background: rgba(0, 0, 0, 0.4);
	}

	.record {
		display: flex;
		align-items: center;
		color: #003690;
		font-size: 28rpx;
		margin-top: 20rpx;

		image {
			width: 32rpx;
			height: 32rpx;
			margin: 0 20rpx 0 30rpx;
		}

		span {
			font-weight: 700;
		}
	}

	.record-item {
		display: flex;
		justify-content: space-between;
		padding: 10rpx 30rpx;
		border-bottom: 2rpx solid #eee;

		.record-item-left {
			display: flex;
			align-items: center;

			.shu {
				width: 8rpx;
				height: 28rpx;
				background-color: #003690;
				border-radius: 8rpx;
			}

			.title {
				font-size: 32rpx;
				color: #333;
				font-weight: 500;
				margin: 0 10rpx;
			}

			.time {
				font-size: 28rpx;
				color: #777;
			}
		}

		.record-item-right {
			display: flex;
			align-items: center;

			.dianhua {
				width: 28rpx;
				height: 28rpx;
			}

			.zhankai {
				width: 36rpx;
				height: 36rpx;
			}

			.title {
				font-size: 32rpx;
				color: #555;
				font-weight: 500;
				margin: 0 10rpx;
			}
		}
	}
</style>
